<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <input type="text" id="user">
    <input type="text" id="pwd">
    <input type="button" id="login" value="登录">
    <input type="button" id="remove" value="删除">
<div id="wrap">  </div>
    <script>
        //你想存什么，就用setItem设置什么
        //console.log( window.localStorage.getItem('user') );
        if( window.localStorage.getItem('user') ){
            user.value = window.localStorage.getItem('user');
            pwd.value = window.localStorage.getItem('pwd');
            wrap.innerHTML = window.localStorage.getItem('box');
        }

        login.onclick = function () {
            //console.log( user.value );
            //console.log( window.localStorage );
            if( user.value ){
                window.localStorage.setItem('user',user.value);
                window.localStorage.setItem('pwd',pwd.value);
                window.localStorage.setItem('box','<div class="box" style="background: purple;width: 100px;height: 50px">永久存储</div>');
            }
        };
        remove.onclick = function () {
            window.localStorage.clear();
        }
    </script>
</body>
</html>